<script setup lang="ts">
import { $t } from '@/locales';
import { ApiRoleQuery } from '@/api-services';
import { computed, ref } from 'vue';
import { useForm } from '@/hooks/common/form';
import { NetoKit } from '@/typings/neto';

defineOptions({
  name: 'RoleSearch'
});

interface Emits {
  (e: 'reset'): void;
  (e: 'search'): void;
}

const emit = defineEmits<Emits>();

type SearchModel = NetoKit.NullToUndefined<ApiRoleQuery>;
const model = defineModel<SearchModel>('model', { required: true });
console.log(model.value, 'model')

const { formRef, validate, restoreValidation } = useForm();

const datetimepickerGroupRef = ref();
async function reset() {
  await restoreValidation();
  //清空日期,但是现在不知道为什么清空不了
  //datetimepickerGroupRef.value.reset();
  emit('reset');
}

function search() {
  emit('search');
}

// 添加一个计算属性来处理 isEnable 的布尔值到字符串的映射
const isEnableString = computed({
  get: () => {
    switch (model.value.isEnable) {
      case true: return '1';
      case false: return '0';
      default: return undefined;
    }
  },
  set: (value) => {
    switch (value) {
      case '0': model.value.isEnable = false; break;
      case '1': model.value.isEnable = true; break;
      default: model.value.isEnable = undefined; break;
    }
  }
});
</script>

<template>
  <ElCard class="card-wrapper" :header="$t('common.search')">
    <ElForm ref="formRef" :model="model" label-width="auto">

      <ElSpace>

        <ElFormItem :label="$t('common.timeRange')" prop="timeRange" style="max-width: 600px;">
          <DatetimepickerGroup ref="datetimepickerGroupRef" v-model:start-time="model.startTime"
            v-model:end-time="model.endTime">
          </DatetimepickerGroup>
        </ElFormItem>


        <ElFormItem :label="$t('common.keyword')" name="keyword" style="max-width: 300px;">
          <ElInput v-model="model.keyWords!" :placeholder="$t('common.keywordSearch')" />
        </ElFormItem>



        <ElFormItem :label="$t('page.manage.common.isEnable')" name="isEnable">
          <ElRadioGroup v-model="model.isEnable">
            <ElRadio :value="true">{{ $t('common.yesOrNo.yes') }}</ElRadio>
            <ElRadio :value="false">{{ $t('common.yesOrNo.no') }}</ElRadio>
          </ElRadioGroup>
        </ElFormItem>

      </ElSpace>


      <ElSpace class="w-full justify-end" alignment="end">
        <ElButton @click="reset">
          <template #icon>
            <icon-ic-round-refresh class="text-icon" />
          </template>
          {{ $t('common.reset') }}
        </ElButton>
        <ElButton type="primary" plain @click="search">
          <template #icon>
            <icon-ic-round-search class="text-icon" />
          </template>
          {{ $t('common.search') }}
        </ElButton>
      </ElSpace>


    </ElForm>
    </ElCard>
</template>

<style scoped></style>
